<template>
  <el-dialog
    title="博客评论详细信息"
    width="50%"
    top="13vh"
    center
    :visible.sync="dialogVisible"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <!-- 骨架加载 -->
    <el-skeleton :loading="buttonLoad" :rows="3" :throttle="200" animated>
      <template class="ls2">
        <div class="comment">
          <div class="row">
            <span>评论区块: </span>
            {{ comment.blockId }}
          </div>
          <el-row class="row">
            <el-col :span="10">
              <span>点赞数量: </span>
              {{ comment.likeNum }}
            </el-col>
            <el-col :span="10">
              <div v-show="oneCommentFlag">
                <span>回复数量: </span>
                {{ comment.replyNum }}
              </div>
            </el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="5">
              <span>作者点赞: </span>
              {{ comment.authorLike === 0 ? '点赞' : '正常' }}
            </el-col>
            <el-col :span="5">
              <span>置顶状态: </span>
              {{ comment.topFlag === 0 ? '置顶' : '正常' }}
            </el-col>
            <el-col :span="5">
              <span>隐藏状态: </span>
              {{ comment.topFlag === 0 ? '隐藏' : '正常' }}
            </el-col>
            <el-col :span="5">
              <span>删除状态: </span>
              {{ comment.deleteFlag === 0 ? '删除' : '正常' }}
            </el-col>
            <el-col :span="4">
              &nbsp;
            </el-col>
          </el-row>
          <div class="row">
            <span>评论用户: </span>
            {{ comment.userName }}
          </div>
          <div class="content">
            <span>评论内容: </span>
            <span>{{ comment.content }}</span>
          </div>
          <div class="row">
            <span>被评论用户: </span>
            {{ comment.parentUserName }}
          </div>
          <div v-show="!isOneComment" class="content">
            <span>被回复内容: </span>
            {{ comment.replyContent }}
          </div>
          <div class="row">
            <span>备注信息: </span>
            {{ comment.remark }}
          </div>
        </div>
      </template>
    </el-skeleton>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle(false)">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  /**
   * 系统菜单添加或修改插件
   */
  export default {
    name: "comment-info",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 博客评论详细信息
        comment: {
          // 评论主键
          commentId: '',
          // 博客id
          blogId: '',
          // 评论区块id（只有’回复‘评论时，该属性才有值）
          blockId: '',
          // 评论所属用户id
          userId: '',
          // 评论所属用户名称
          userName: '',
          // 被回复用户名称（只有’回复‘评论时，该属性才有值）
          parentUserName: '',
          // 评论被点赞数
          likeNum: 0,
          // 评论被回复数
          replyNum: 0,
          // 评论删除状态[0-正常 1-删除]
          deleteFlag: undefined,
          // 评论隐藏状态[0-正常 1-隐藏]
          hideFlag: undefined,
          // 作者点赞状态[0-点赞 1-正常]
          authorLike: undefined,
          // 评论置顶状态[0-置顶 1-正常]
          topFlag: undefined,
          // 用户评论内容
          content: undefined,
          // 回复的评论内容（只有’回复‘评论时，该属性才有值）
          replyContent: undefined,
          // 评论时间
          createTime: undefined,
          // 备注
          remark: undefined,
        },
        // 评论类型['0'-一级评论 '1'-回复评论]
        oneCommentFlag: undefined,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
      }
    },
    computed: {
      /**
       * 评论类型
       * @returns {boolean} true-一级评论 false-回复评论
       */
      isOneComment() {
        return this.oneCommentFlag === '0'
      }
    },
    methods: {
      /**
       * 初始化博客评论详细信息弹出框事件
       * @param {string} blogId  博客id
       * @param {Object} comment 博客评论信息对象
       */
      initCommentInfoDialog(blogId, comment) {
        // 按钮不可被点击
        this.buttonLoad = true

        let commentObj = this.comment
        commentObj.commentId = comment.commentId
        commentObj.blogId = blogId
        commentObj.blockId = comment.blockId
        commentObj.userId = comment.userId
        commentObj.likeNum = comment.likeNum
        commentObj.replyNum = comment.replyNum
        commentObj.deleteFlag = comment.deleteFlag
        commentObj.hideFlag = comment.hideFlag
        commentObj.authorLike = comment.authorLike
        commentObj.topFlag = comment.topFlag
        commentObj.content = comment.content
        commentObj.createTime = comment.createTime
        commentObj.remark = comment.remark
        // 设置评论类型值
        this.oneCommentFlag = comment.oneCommentFlag

        for (let i = 0; i < 30; i++) {
          commentObj.content += comment.content
        }

        this.$axios.$get('/comment/manage/info', { params: { commentId: comment.commentId }})
          .then(({ data }) => {
            let commentDto = data.commentDto
            commentObj.userName = commentDto.userName
            commentObj.parentUserName = commentDto.parentUserName
            commentObj.replyContent = commentDto.content
          })
          .catch(() => {
            // 关闭博客评论弹出框
            this.closeHandle(false)
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      // 弹出框关闭处理事件
      closeHandle(bool) {
        // 重置菜单表单对象
        this.comment = {
          // 评论主键
          commentId: '',
          // 博客id
          blogId: '',
          // 评论区块id（只有’回复‘评论时，该属性才有值）
          blockId: '',
          // 评论所属用户id
          userId: '',
          // 评论所属用户名称
          userName: '',
          // 被回复用户名称（只有’回复‘评论时，该属性才有值）
          parentUserName: '',
          // 评论被点赞数
          likeNum: 0,
          // 评论被回复数
          replyNum: 0,
          // 评论删除状态[0-正常 1-删除]
          deleteFlag: undefined,
          // 评论隐藏状态[0-正常 1-隐藏]
          hideFlag: undefined,
          // 作者点赞状态[0-点赞 1-正常]
          authorLike: undefined,
          // 评论置顶状态[0-置顶 1-正常]
          topFlag: undefined,
          // 用户评论内容
          content: undefined,
          // 回复的评论内容（只有’回复‘评论时，该属性才有值）
          replyContent: undefined,
          // 评论时间
          createTime: undefined,
          // 备注
          remark: undefined,
        }
        // 清空评论类型值
        this.oneCommentFlag = undefined

        if (typeof bool === 'function') {
          bool = false
        }
        // 向上传递事件
        this.$emit('close-comment-dialog', bool)
      },
    },
  }
</script>

<!--
  css字符对应
-->
<style>
  .comment .row {
    line-height: 30px;
  }
  .comment .content {
    margin: 5px 0;
  }
  .comment .row > span {
    letter-spacing: 0.05rem;
  }
</style>
